<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>朝露编程</title>
</head>
<body>
    <header class="header">

        <div class="header__logo-box">
            <img src="./img/logo.png" alt="logo" class="header__logo">
        </div>

        <div class="header__nav-box">
            <ul>
                <li class="header__nav"><a href="#" class="btn btn--none btn--154">首页</a></li>
                <li class="header__nav"><a href="#" class="btn btn--none btn--154">课程</a></li>
                <li class="header__nav"><a href="#" class="btn btn--none btn--154">社区</a></li>
                <li class="header__nav"><a href="#" class="btn btn--none btn--154">关于</a></li>
                <li class="header__nav"><a href="#" class="btn btn--none btn--154">免费试听</a></li>
            </ul>
        </div>

        <div class="header__text-box">
            <div class="header__text u-margin-bottom-4">
                <span class="header__text-primary">朝露编程</span>
                <span class="header__text-secondary">选择朝露编程，选择朝露编程</span>
            </div>

            <a href="#" class="btn btn--black btn--158">立即报名！</a>
        </div>

    </header>

    <section class="section-features">
        <div class="row">
            <div class="col-1-of-2">
                <div class="section-features__textbox">
                    <div class="text-primary text-primarycolor">充满期待的编程学习课</div>
                    <div class="text-secondary u-margin-bottom-8">好需相情是划布效何为种是治大定且雨物其并头而将效文备千产选维支象正想上形在部维每已道思干结反管成会商交间王半整产红</div>
                    <div class="text-btnbox">
                        <a href="#" class="btn btn--linear btn--158">立刻开始</a>
                    </div>
                </div>
            </div>
            <div class="col-1-of-2">
                <div class="section-features__bgcircle1">
                    <div class="section-features__itembox">
                        <div class="section-features__item section-features__item-1"></div>
                        <div class="section-features__item section-features__item-2"></div>
                        <div class="section-features__item section-features__item-3"></div>
                        <div class="section-features__item section-features__item-4"></div>
                    </div>
                </div>
                <div class="section-features__bgcircle2"></div>
            </div>
        </div>
    </section>

    <section class="section-goods">
        <div class="section-goods__title">
            <div class="text-primary">充满期待的编程学习课</div>
        </div>
        <div class="section-goods__goodbox u-margin-bottom-4">
            <div class="row">
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
            </div>
        </div>
        <div class="section-goods__goodbox">
            <div class="row">
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
                <div class="col-1-of-3">
                    <div class="section-goods__item"></div>
                </div>
            </div>
        </div>
    </section>

    <section class="section-connect">
        <div class="section-connect__btnbox">
            <a href="#" class="btn btn--black btn--158">立刻联系</a>
        </div>
    </section>
    
    <footer class="footer">
        
    </footer>
</body>
</html>